<template>
	<view class="news-page">
		<!-- 顶部导航栏 -->
		<view class="top-nav">
			<text class="nav-item active">要闻</text>
			<text class="nav-item">推荐</text>
			<text class="nav-item">关注流</text>
			<text class="nav-item">24小时</text>
			<text class="nav-item">娱乐</text>
			<text class="nav-item">桂林</text>
			<text class="nav-item">财经</text>
		</view>
		<!-- 天气+更新提示+搜索框区域 -->
		<view class="header-bar">
			<text class="weather-info">4°C 小雨 桂林 PM2.5 9</text>
			<text class="update-info">为您更新了{{ allNews.length }}条内容</text>
			<view class="search-box">
				<input class="search-input" placeholder="搜索关键词" v-model="searchValue" @input="filterNews" />
			</view>
		</view>
		<!-- 新闻列表（带下拉刷新功能） -->
		<view 
			class="news-list" 
			@touchstart="handleTouchStart" 
			@touchend="handleTouchEnd" 
			:style="{ marginTop: pullDownDistance + 'rpx', transition: isPullingDown ? 'none' : 'margin-top 0.3s ease' }"
		>
			<!-- 下拉刷新提示 -->
			<view class="pull-down-indicator" v-if="pullDownDistance > 0">
				<text v-if="!isRefreshing">下拉可以刷新</text>
				<text v-if="isRefreshing">正在刷新...</text>
			</view>
			
			<!-- 新闻列表项 -->
			<NewsView 
				v-for="(item, index) in filteredNews" 
				:key="index" 
				:title="item.title" 
				:isTop="item.isTop"
				:author="item.author" 
				:comments="item.comments" 
				:images="item.images" 
				:isAd="item.isAd"
				:imgUrl1="item.imgUrl1" 
				:imgUrl2="item.imgUrl2" 
				:imgUrl3="item.imgUrl3"
			></NewsView>
		</view>
		<!-- 底部标签栏 -->
		<view class="bottom-tab">
			<text class="tab-item active">首页</text>
			<text class="tab-item">视频</text>
			<text class="tab-item">话题</text>
			<text class="tab-item">
				<navigator url="/pages/components/Login/Login">未登录</navigator>
			</text>
		</view>
	</view>
</template>

<script>
	import data from "../../data/news.json";
	import NewsView from "../../components/NewsView.vue";
	export default {
		components: {
			NewsView
		},
		data() {
			return {
				searchValue: "",
				// 新闻数据列表
				allNews: [{
						title: "2020,我们温暖的记忆",
						isTop: true,
						author: "新闻联播",
						comments: 405,
						images: []
					},
					{
						title: "森林大县57年无大火是怎么做到的",
						isTop: true,
						author: "光明网",
						comments: 234,
						images: []
					},
					{
						title: "美对中国加征24%关税将继续暂停一年",
						isTop: false,
						author: "新华社",
						comments: 890,
						images: ["/static/新闻/关税.png"]
					},
					{
						title: "女子照出全家发光源头竟是洗衣粉",
						isTop: false,
						author: "极光新闻",
						comments: 560,
						images: ["/static/新闻/洗衣粉.png"]
					},
					{
						title: "与你有关！“十五五”时期将推出这些重大举措",
						isTop: false,
						author: "人民日报",
						comments: 1200,
						images: ["/static/新闻/十五五.png"]
					},
					{
						title: "刘嘉玲、梁朝伟夫妇为张叔平庆生",
						isTop: false,
						author: "娱乐星闻",
						comments: 780,
						images: []
					},
					{
						title: "测试默认图显示-无有效图片",
						isTop: false,
						author: "测试账号",
						comments: 10,
						images: ["/static/新闻/不存在的图片.png"]
					},
					{
						title: "加微信交友群,喜欢就聊,找喜欢的人",
						isTop: false,
						author: "我主良缘文化",
						comments: 0,
						isAd: true,
						imgUrl1: "/static/新闻/1.png", 
						imgUrl2: "/static/新闻/2.png",
						imgUrl3: "/static/新闻/3.png"
					}
				],
				// 下拉刷新相关变量
				startY: 0,          
				pullDownDistance: 0, 
				isRefreshing: false, // 是否正在刷新
				refreshThreshold: 80 
			};
		},
		computed: {
			// 过滤后的新闻列表
			filteredNews() {
				if (!this.searchValue) return this.allNews;
				const keyword = this.searchValue.trim().toLowerCase();
				return this.allNews.filter(item =>
					item.title.toLowerCase().includes(keyword) ||
					item.author.toLowerCase().includes(keyword)
				);
			}
		},
		onLoad() {
			this.news=data.allNews;
			 console.log('新闻数据加载完成', this.allNews.length);
		},
		methods: {
			// 搜索过滤
			filterNews() {},
			
			// 触摸开始记录起始位置
			handleTouchStart(e) {
				if (this.isRefreshing) return; // 正在刷新时不处理新的触摸
				this.startY = e.changedTouches[0].clientY;
				this.pullDownDistance = 0;
			},
			
			// 触摸结束处理下拉逻辑
			handleTouchEnd(e) {
				if (this.isRefreshing) return;
				
				const endY = e.changedTouches[0].clientY;
				const pullDistance = endY - this.startY;
				
				this.pullDownDistance = Math.min(pullDistance * 2, 150);
				
				// 下拉距离达到阈值，触发刷新
				if (this.pullDownDistance >= this.refreshThreshold) {
					this.startRefresh();
				} else {
					// 未达到阈值，回弹
					this.pullDownDistance = 0;
				}
			},
			
			// 开始刷新
			startRefresh() {
				this.isRefreshing = true;
				
				// 模拟网络请求延迟（实际项目中替换为真实接口请求）
				setTimeout(() => {
					// 这里可以添加新的新闻数据（示例：随机添加一条测试新闻）
					if (Math.random() > 0.3) {
						this.allNews.unshift({
							title: `最新资讯：${new Date().toLocaleTimeString()} 突发新闻`,
							isTop: false,
							author: "实时新闻",
							comments: 0,
							images: []
						});
					}
					
					// 刷新完成，恢复状态
					this.isRefreshing = false;
					this.pullDownDistance = 0;
				}, 1500);
			}
		}
	};
</script>

<style scoped>
	.news-page {
		background-color: #fff;
		min-height: 100vh;
	}
	.top-nav {
		display: flex;
		padding: 16rpx 20rpx;
		background-color: #e53e3e;
		overflow-x: auto;
		white-space: nowrap;
	}
	.top-nav::-webkit-scrollbar {
		display: none;
	}
	.nav-item {
		font-size: 30rpx;
		color: #fff;
		padding: 0 15rpx;
	}
	.nav-item.active {
		font-weight: bold;
		border-bottom: 4rpx solid #fff;
		padding-bottom: 6rpx;
	}
	.header-bar {
		padding: 12rpx 16rpx;
		background: linear-gradient(to bottom, #e53e3e, #f86f6f);
	}
	.weather-info,
	.update-info {
		font-size: 24rpx;
		color: #fff;
		display: block;
		margin-bottom: 10rpx;
	}
	.search-box {
		background-color: #fff;
		border-radius: 36rpx;
		padding: 0 20rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
	}
	.search-input {
		flex: 1;
		height: 100%;
		font-size: 26rpx;
		border: none;
		outline: none;
	}
	/* 新闻列表样式 */
	.news-list {
		padding: 16rpx 16rpx 100rpx;
	}
	/* 下拉刷新指示器样式 */
	.pull-down-indicator {
		text-align: center;
		font-size: 26rpx;
		color: #666;
		padding: 15rpx 0;
	}
	.bottom-tab {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.tab-item {
		font-size: 28rpx;
		color: #666;
	}
	.tab-item.active {
		color: #e53e3e;
		font-weight: bold;
	}
</style>